<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="lcx">
    <title>图片切换</title>
    <script src="jquery-3.1.1.js"></script>
    <style>
        * {
            box-sizing: border-box;
        }
        
        body {
            width: 100%;
            height: 100%;
        }
        
        ul,
        li,
        h1 {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        #box {
            width: 600px;
            height: 100%;
            margin: 0 auto;
            border: 1px solid #666;
        }
        
        #box h1 {
            text-align: center;
            width: 598px;
            height: 40px;
            line-height: 40px;
            background-color: #eee;
            /*margin-bottom: 10px;*/
        }
        
        .middle_a {
            overflow: hidden;
            height: 400px;
            width: 598px;
            position: relative;
            margin-bottom: 10px;
            
        }
        .middle_b {
            overflow: hidden;
            height: 400px;
            width: 598px;
            position: relative;
            margin-bottom: 10px;
        }
        .middle_c {
            overflow: hidden;
            height: 400px;
            width: 598px;
            position: relative;
            margin-bottom: 10px;
        }
        
        #box ul {
            width: 1200px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
        }
        
        #box ul li {
            width: 590px;
            height: 400px;
            float: left;
            margin: 5px;
            overflow: hidden;
        }
        
        #box img {
            width: 598px;
            height: 400px;
            margin: 5px;
        }
        
        #one {
            background-color: lightcoral;
            color: white;
            width: 586px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            bottom: 0px;
            left: 8px;
        }
        
        #two {
            background-color: lightcoral;
            color: white;
            width: 587px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            bottom: 0px;
            left: 8px;
        }
         #three {
            background-color: #0d404a;
            color: white;
            width: 586px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            bottom: 0px;
            left: 8px;
        }
        
        #four {
            background-color: #0d404a;
            color: white;
            width: 587px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            bottom: 0px;
            left: 8px;
        }
         #five {
            background-color: cornflowerblue;
            color: white;
            width: 586px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            bottom: 0px;
            left: 8px;
        }
        
        #six {
            background-color: cornflowerblue;
            color: white;
            width: 587px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            position: absolute;
            bottom: 0px;
            left: 8px;
        }

    </style>
</head>

<body>
    <div id="box">
        <h1>专辑推荐</h1>
        <div class="middle_a">
            <ul>
                <li><img src="images/1_1.jpg" alt=""></li>
                <li><img src="images/1_2.jpg" alt=""></li>
            </ul>
            <div id="one">COCOON/可可尼</div>
            <div id="two">几何为网-极致绚烂</div>
        </div>
        <div class="middle_b">
            <ul>
                <li><img src="images/2_1.jpg" alt=""></li>
                <li><img src="images/2_2.jpg" alt=""></li>
            </ul>
            <div id="three">COCOON/可可尼</div>
            <div id="four">几何为网-极致绚烂</div>
        </div>
        <div class="middle_c">
            <ul>
                <li><img src="images/3_1.jpg" alt=""></li>
                <li><img src="images/3_2.jpg" alt=""></li>
            </ul>
            <div id="five">COCOON/可可尼</div>
            <div id="six">几何为网-极致绚烂</div>
        </div>

    </div>
</body>

</html>
<script>
    $('.middle_a').hover(function () {
        $('#one').slideDown(200);
        $('#two').slideUp(200);
        $('.middle_a ul').animate({
            left: -600,
        }, 200)
    }, function () {
        $('#two').slideDown(200);
        $('#one').slideUp(200);
        $('.middle_a ul').animate({
            left: 0,
        })
    }, 200)

    $('.middle_b').hover(function () {
        $('#three').slideDown(200);
        $('#four').slideUp(200);
        $('.middle_b ul').animate({
            left: -600,
        }, 200)
    }, function () {
        $('#four').slideDown(200);
        $('#three').slideUp(200);
        $('.middle_b ul').animate({
            left: 0,
        })
    }, 200)

    $('.middle_c').hover(function () {
        $('#five').slideDown(200);
        $('#six').slideUp(200);
        $('.middle_c ul').animate({
            left: -600,
        }, 200)
    }, function () {
        $('#six').slideDown(200);
        $('#five').slideUp(200);
        $('.middle_c ul').animate({
            left: 0,
        })
    }, 200)
    

</script>